import React, { Component } from "react";
import ReactDom from "react-dom";
import './index.css'
import img from './img/3.jpg'

function App() {
    return <div className="box">
        {/* <Com/> */}
        {/* <img src={img} alt="" /> */}
        <Warp />
    </div>
}

function Com() {
    return <div>
        我是一个组件
    </div>
}

class Warp extends Component {
    // 定义组件中内部状态
    constructor() {
        super()
        this.state = {
            count: 1000,
            num: 2000,
            classes: "active",
            flag: true,
            obj: {
                name: "张三"
            },
            arr: [1, 2, 3, 4],
            list: [111, 222, 333, [444, 555]],
            list2: [
                {
                    name: "张三"
                },
                {
                    name: "李斯特"
                }
            ]
        }
    }
    // 渲染视图
    render() {
        // 通过解构赋值拿到数据
        const { count,
            num,
            classes,
            flag,
            obj,
            arr,
            list,
            list2
        } = this.state

        const span = <span>
            {flag ? "未付款11" : "已支付22"}
        </span>
        return <div>
            {/* 直接展示 */}
            <p>
                数字: {count}
            </p>
            {/* 直接展示 */}
            <p>
                字符串:  {classes}
            </p>
            {/* 布尔值 null undefined 显示不出来 */}
            <p>
                布尔值: {flag} - {null} - {undefined}
            </p>
            {/* 对象不能作为react的子元素 */}
            <p>
                对象: {obj.name}
            </p>
            {/* 自动展开 */}
            <p>
                数组: {arr}
            </p>

            <p>
                列表: {list}
            </p>
            {/* 
            <p>
                列表2: { list2 }
            </p> */}




            <br />
            <div>
                v-for :
                {
                    [<li>张三</li>, <li>李四</li>]
                }
                {/* {
                    list2.map(item => {
                        return <li>
                            { item.name }
                        </li>
                    })
                } */}
            </div>
            <p>
                v-show : <span className={flag ? "block" : "none"}>show</span>
            </p>
            {/* <p>
                v-if : 
            </p>
            <p>
                v-else : 
            </p> */}
            <p>
                {/* { flag ===0 ? '00': flag === 1? '11': '22'} */}
                商品状态 :  {span}
            </p>
            <p>
                v-bind : <span className={classes}>123</span>
            </p>
            <p>
                v-model :
            </p>
        </div>
    }
}


ReactDom.render(<App />, document.getElementById('root'), () => {
    console.log("渲染完成")
})